<template>
  <div class="app-container" v-cloak>
    <div>
      <img src="../../../assets/icons/sy_fhbtn.png" class="fh_img" @click="$router.back()">
      <div style=" display: inline-block; ">
        <!-- <div class="wz_cl">اندازه فیری ایپتفاه اپاپی اطلاعات</div> -->
        <div >{{czinfo.stName}}( {{czinfo.stCode}})</div>
      </div>
    </div>

    <el-tabs style="min-width: 700px;" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="实时监测信息" name="ssjcsl">
        <ssjcsl :czid="$route.query.stcode"></ssjcsl>
      </el-tab-pane>
      <el-tab-pane label="日统计过程信息" name="ri">
        <rtjsl :czid="$route.query.stcode"></rtjsl>
      </el-tab-pane>
      <el-tab-pane label="月统计过程信息" name="yue">
        <ytjsl :czid="$route.query.stcode"></ytjsl>
      </el-tab-pane>
      <el-tab-pane label="年统计过程信息" name="nian">
        <ntjsl :czid="$route.query.stcode"></ntjsl>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import { getcname } from "@/api/measurement/watermonitor"
  import ssjcsl from "./components/qdsq_ssjcsl.vue"
  import rtjsl from "./components/qdsq_rtjsl.vue"
  import ytjsl from "./components/qdsq_ytjsl.vue"
  import ntjsl from "./components/qdsq_ntjsl.vue"

  export default {
    name: "subqdsqsl",
    name: "subqdsqsl",
    components: { ssjcsl, rtjsl, ytjsl, ntjsl },
    dicts: ["st_moniItem", "rise_patt", "st_eqtype","sys_chan_level"],
    data() {
      return {
        //测站统计
        czinfo: {
          stCode: undefined,
          stName: undefined,
        },
        gczplist: [],
        stcode: undefined,
        activeName: 'ssjcsl'
      };
    },
    created() {

    },
    mounted() {
      const pa = this.$route.query.stcode;
      this.czinfo.stCode = pa;
      this.loadname();

    },
    methods: {
      loadname(){
        getcname({statCd:this.$route.query.stcode}).then(response => {
          this.czinfo.stName = response?response:'';
        });
      },
      handleClick(tab, event) {
      }

    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">

  .el-carousel__item {
    background-color: #99a9bf;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .c_jbxx {
    margin-top: 5px;
    padding: 10px 0px;
    font-size: 14px;

    .cj_it {
      margin-top: 10px;

      .fyh_mc {
        color: #242829;
      }

      .zw_mc {
        color: #242829;
        span {
          margin-left: 20px;
        }
      }
    }

  }

  .dm_c {
    margin-top: 5px;
    min-height: 180px;
    background: #ffffff;
    position: relative;
    .dc_title {
      padding: 15px;
      font-size: 14px;

      span {
        color: #1890ff;
      }
    }

    .dc_dmxs {
      padding: 15px;
      font-size: 14px;
      position: absolute;
      right: 20px;
      top: 0px;
      span {
        color: #1890ff;
      }
    }

    .dc_row {
      text-align: left;
      min-height: 100px;
      overflow: hidden;
      .dr_it {
        width: 80%;
        margin: 0 auto;
      }

      .mtd{
        margin-top: 20px;
      }

      .dr_t {
        font-size: 18px;
        font-weight: 700;
        margin-top: 8px;
      }

      .dr_w {
        font-size: 14px;
        margin-top: 8px;
        line-height: 18px;
        color: #A6A6A6;
      }
    }
  }


  .wz_cl {
    color: #1890ff;
  }

  .czxq_c {
    padding: 20px;
    background: #f7fbfe;
    margin-right: 30px;
  }

  .fh_img {
    margin: 5px 10px 0px 0;
    cursor: pointer;
  }

  [v-cloak] {
    display: none;
  }

</style>
